<template>
    <g
            :transform="computedTransform"
            class="cursor-pointer"
            @contextmenu.stop="itemRightClick($event,stateDesc,isMainPage,name,'diankangqi')"
    >

            <path d="M90,260 A20,20 270 1,1 110,240" style="stroke-width:2; fill:none;" :stroke="color" />
            <line x1="90" y1="240" x2="110" y2="240" style="stroke-width:2" :stroke="color"/>
            <line x1="90" y1="210" x2="90" y2="240" style="stroke-width:2" :stroke="color"/>
            <line x1="75" y1="210" x2="105" y2="210" style="stroke-width:2" :stroke="color"/>
            <line x1="78" y1="205" x2="102" y2="205" style="stroke-width:2" :stroke="color"/>
            <line x1="81" y1="200" x2="99" y2="200" style="stroke-width:2" :stroke="color"/>

    </g>
</template>

<script setup>
import { computed } from 'vue';

// 定义 props
const props=defineProps({
    translateX: { type: Number, default: 0 },
    translateY: { type: Number, default: 0 },
    rotate: { type: Number, default: 0 },
    scale: { type: Number, default: 1 },
    stateDesc:{
        type: String,
        default: ""
    },
  color: {
      type: String,
      default: '#fff'
  },
    isMainPage:{
        type: Boolean,
    },
    name: {
        type: String,
        default: ''
    },

});

// 使用 computed 计算 transform 字符串
const computedTransform = computed(() => {
    return `translate(${props.translateX}, ${props.translateY})
          rotate(${props.rotate})
          scale(${props.scale})`;
});
const emit=defineEmits(['itemRightClick'])
function itemRightClick(event,stateDesc,isMainPage,name,type) {
    event.preventDefault(); // 阻止默认的右键菜单弹出
    // 显示自定义右键菜单
    const {clientX, clientY} = event
    let params = {
        clientX,
        clientY,
        type,
        stateDesc,
        isMainPage,
        deviceName:name,
    }
    emit('itemRightClick', params)
}
</script>

<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>
